TIP

position能将所有元素改变为inline-block

Document flow

TIP

默认属性position的值是static

1️⃣ static

2️⃣ absolute 如果祖先(ancestor)有position的类型则以最近的为参照来移动,否则直接参照html标签的位置

3️⃣ relative the positioning context is the element itself and the element is also not taken out of the document flow

4️⃣ fixed depends on viewport

5️⃣ sticky

202112081832684

Changine the position

TIP

Posting移动的位置需要有一个参照物,也就是refer to Positioning context

1️⃣ top

2️⃣ right

3️⃣ bottom

4️⃣ left

以上属性要想起作用,position不能是static

202112081829836

z-index

TIP

work when use position,因为元素脱离了文档流了,会产生覆盖的效果.默认是0

overflow

TIP

当元素在容器中溢出时可以使用它来使得它的定位超出容器之后不可见